<template>
  <div class="mti-container-upload">
    <crec-modal
      :title="title"
      :visible="show"
      :width="width"
    >
      <!-- 步骤条 -->
      <crec-steps :current="active" class="mb-10">
        <crec-step title="上传文件"></crec-step>
        <crec-step title="数据分析"></crec-step>
        <crec-step title="导入结果"></crec-step>
      </crec-steps>
      <!-- 步骤一 -->
      <crec-upload-dragger
        class="block mx-auto mt-10"
        name="file"
        v-if="active == 0"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      >
        <p class="ant-upload-drag-icon">
          <crec-icon :style="{fontSize:'40px'}" type="inbox" />
        </p>
        <p>
          点击或拖动文件到 <span class="color-primary">此处上传</span>
        </p>
      </crec-upload-dragger>
      <p class="color-red my-10">提示：进允许导入xls或xlsx格式的文件</p>

      <!-- 底部页脚 -->
      <template slot="footer">
        <crec-row type="flex" justify="space-between">
          <crec-col>
            <crec-button v-if="active == 0">模板下载</crec-button>
            <crec-button v-if="active == 1" @click="handleAnalyze(1)">下载分析数据</crec-button>
            <crec-button v-if="active == 2" @click="handleAnalyze(2)">下载导入结果</crec-button>
          </crec-col>
          <crec-col>
            <crec-button type="primary" @click="submitFileForm" :loading="isUploading" v-if="active != 2">下一步</crec-button>
            <crec-button @click="$emit('update:show',false)">关闭</crec-button>
          </crec-col>
        </crec-row>
      </template>

      <!-- 分析数据 -->
      <!-- <div v-if="active == 1" style="padding:20px;min-height:200px">
        {{ analyzeResult }}
      </div> -->
      <!-- 导入结果 -->
      <!-- <div v-if="active == 2" style="padding:20px;min-height:200px;text-align: center;">
        <img src="../../../../assets/images/success.png" alt="" style="width:48px;height:48px;margin-bottom: 40px;" />
        <div> {{ analyzeResult1 }}</div>
      </div>
      <slot name="operate" v-if="isOperate && uploadFile"></slot> -->

      <!-- <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitFileForm" :loading="isUploading" v-if="active != 2">下一步</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div> -->
    </crec-modal>

  </div>
</template>
<script>
// import { getToken } from 'ctcemti-ui/src/utils/auth'
// import TablePager from 'ctcemti-ui/src/components/Table/TablePager'
// import { listImpMsg } from 'ctcemti-ui/src/api/system/common'
// import { StringUtil } from 'ctcemti-ui/src/utils/base/StringUtil'
// import { JsonUtil } from 'ctcemti-ui/src/utils/base/JsonUtil'
// import {
//   checkErsTestQuestion,
//   importErsTestQuestion
// } from '@/api/exam/questionBank'

export default {
  name: 'ExcelUpload',
  model: {
    prop: 'show',
    event: 'update:show'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入'
    },
    width: {
      type: Number,
      default: 560
    }
  },
  data () {
    return {
      active: 0,
      isUploading: false
    }
  },
  methods: {
     // 提交上传文件
    submitFileForm () {
      if (this.localUpload != null) {
        this.$emit('on-success', this.locationFiles, this.locationFiles)
        this.cancel()
      } else {
        this.submit()
      }
    },
    // 提交
    submit () {
      // 判断文件，有文件则上传
      if (this.active === 0) {
        if (this.$refs.upload && this.$refs.upload.uploadFiles.length > 0) {
          this.isUploading = true
          this.$refs.upload.submit()
        } else {
          this.$message.warning('请上传文件')
        }
      }
      // 数据分析
      if (this.active === 1) {
        // 调用API函数，提交上报结果
        this.importErsTestQuestion()
      }
    },
      // 导入
    importErsTestQuestion () {
      // const data = {
      //   testQuestionTypeId: this.testQuestionTypeId,
      //   fileId: this.fileId
      // }
      // importErsTestQuestion(data)
      //   .then((response) => {
      //     this.active = 2
      //     // 分析结果
      //     this.analyzeResult1 = response.data.analyzeResult
      //     // 下载分析结果路径
      //     this.fileUrls = response.data.fileUrl
      //   })
    }
  }
}
</script>
<style scoped lang="less"></style>
